import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {Carousel} from 'antd';
import SecondStore from '../../../../../store/secondStore'
import {IEquipType} from "../../../../../type/firstType";
import ModalText from "../../../../../components/ModalText";

interface IProps {
    equipConsume: IEquipType[]
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    public componentDidMount() {
    }


    public render() {
        const {equipConsume} = this.props
        return (
            <div className={styles.swiper}>
                <div className={styles.title}>
                    <span className={styles.fixSpan}><ModalText text='备件名称' long={10}/></span>
                    <span className={styles.spanWidth}><ModalText text='备件数量' long={10}/></span>
                    <span className={styles.fixSpan}><ModalText text='安装时间' long={10}/></span>
                    {/* <span className={styles.spanWidth}><ModalText text='数量汇总' long={10}/></span> */}
                </div>
                <div className={styles.swiperC}>
                    {
                        equipConsume.length > 0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={8} autoplaySpeed={2000}>
                            {
                                equipConsume.map((item, index) => {
                                    return (
                                        <div className={index % 2 === 0 ? styles.list1 : styles.list}
                                             key={`itemR_${index}`}>
                                            <span title={item.ProductName} className={styles.fixSpan}><ModalText text={item.ProductName}
                                                                                          long={20}/></span>
                                            <span
                                                className={styles.spanWidth}>{Math.round((item.QtyInstalled + Number.EPSILON) * 100) / 100}</span>
                                            <span title={item.time} className={styles.fixSpan}><ModalText text={item.time}
                                                                                          long={20}/></span>
                                            {/* <span className={styles.spanWidth}>{item.sum_QtyInstalled}</span> */}
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
